<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>人脸识别</title>
	<script src="/fileup/plugin/js/jquery-3.1.1.min.js" type="text/javascript"></script>
	<script src="/fileup/plugin/js/bootstrap.min.js"></script>
	<link href="/fileup/plugin/css/bootstrap.min.css" th:href="@{/fileup/plugin/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body>
	<video width="400" height="300"></video>

		<!-- 图像画布 -->
		<canvas width="200" height="150"></canvas>
		<button id="" onclick="face_login()" class="btn btn-info"><i class="icon-play"></i>&nbsp;登录</button>
<script>
    function $(elem){
        return document.querySelector(elem);
    }
    var canvas = $('canvas'),
        context = canvas.getContext('2d'),
        video = $('video'),
        snap = $('#snap'),
        upload = $('#upload'),
        uploaded = $('#uploaded'),
        mediaStreamTrack;
    //打开摄像头
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true,
        }).then(function(stream) {
            mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        });
    }else if (navigator.getMedia) {
        navigator.getMedia({
            video: true
        }, function(stream) {
            mediaStreamTrack = stream.getTracks()[0];
            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        });
    }
//人脸识别参考文档：https://cloud.baidu.com/doc/FACE/
function face_login(){
    context.drawImage(video, 0, 0, 200, 150);
    jQuery.post('faceLogin', {           //指定发送图片到的servlet
        snapData: canvas.toDataURL('image/jpg')
    }).done(function(rs) {
        //对结果集进行解析，判断是否存在人脸
		console.log(JSON.stringify(rs));
        if(rs.error_code == "222202"){
            alert("没有人脸信息或人脸数量非1，请重新拍照！");
        }else if(rs.error_code == "222207"){
            alert("人脸库中没有您的注册信息，请先注册。");
        }else if(rs.error_code == "223120"){
            alert("请正确登录，不得伪造！");
		}else if(rs.error_msg == "SUCCESS"){
            alert("登录成功！");
            // console.log(rs.result.user_list[0].user_info);
		}
    });
}






</script>
</body>
</html>